<!-- start: Container -->

<div class="container">
    <!-- start: Page Title Icon-->
    <div id="page-title-icon"></div>
    <div id="page-title-icon-inner">
        <i class="ico-google-maps ico-white"></i>
    </div>
    <!-- end: Page Title Icon-->
    <!-- start: Page Title -->
    <section id="page-title">
        <h2>Đăng ký thành viên</span></h2>
    </section>
</div>
<div id="wrapper" class="white-wrapper">
    <!-- end: Container  -->
    <!-- start: Container -->
    <div class="container">

        <!-- start: Contact Form -->
        <div class="sixteen columns">

            <div class="form-spacer"></div>

            <!-- Success Message -->
            <div class="success-message">
                <div class="notification success closeable">
                    <p><span>Success!</span> Your message has been sent.</p>
                </div>
            </div>

            <!-- start: Contact Form -->
            <div id="contact-form">
                <form method="post" name="registerForm" class="require-validate ajax-form-register" action="<?php echo $this->url("register", array('controller' => 'register', 'action' => 'register')) ?>"
                      enctype="multipart/form-data">

                    <div class="field">
                        <label>Họ: <span>*</span></label>
                        <input type="text" name="f_name" class="text"/>
                    </div>

                    <div class="field">
                        <label>Tên: <span>*</span></label>
                        <input type="text" name="l_name" class="text"/>
                    </div>

                    <div class="field">
                        <label>Email: <span>*</span></label>
                        <input type="text" name="email" class="text"/>
                    </div>

                    <div class="field">
                        <label>Địa chỉ:</label>
                        <input type="text" name="address" class="text"/>
                    </div>

                    <div class="field">
                        <label>Số điện thoại: </label>
                        <input type="text" name="phone" class="text"/>
                    </div>

                    <div class="field">
                        <label>Mật khẩu: <span>*</span></label>
                        <input type="password" name="password" class="text"/>
                    </div>

                    <div class="field">
                        <label>Nhập lại mật khẩu: <span>*</span></label>
                        <input type="password" name="r_password" class="text"/>
                    </div>


                    <div class="field">
                        <label>Phương thức liên lạc: </label>

                        <div id="contact_field">
                        </div>
                        <a href="#" class="button color launch" id="btn_add_new_contact">Thêm </a>
                    </div>
                    <div class="field">
                        <label>Mã xác nhận </label>

                        <div id="contact_field">
                            <input placeholder="Phân biệt từ in hoa và in thường..." type="text" name="captcha"
                                   id="captcha_txt" class="captcha_require" value="">
                            <span id="captcha" style="color: #ff0000;font-weight: bold;font-size: 18px;"></span>
                            <button type="button" onclick="getCaptcha();">Reload</button>
                        </div>

                    </div>

                    <div class="field">
                        <label>Ảnh đại diện: </label>

                        <div class="avatar-dropzone"><img
                                src="<?php echo $this->basePath(); ?>/templates/front/images/dropzone.png"/></div>
                        <div class="preview-avatar"><img src="" alt=""></div>
                        <input type="hidden" name="avatar" class="text"/>
                    </div>
                    <div class="clearfix"></div>
                    <div class="field">
                        <input type="submit" id="send" value="Đăng ký"/>

                        <div class="loading"></div>
                    </div>
                </form>
                <form id="user-register-avatar" action="/register/userimages" method="POST"
                      enctype="multipart/form-data">
                    <input type="file" name="file" hidden="hidden">
                </form>
            </div>
            <!-- end: Contact Form -->

        </div>
        <!-- end: Contact Form -->

    </div>
    <!-- end: Container -->
</div>
<script>
    $(document).ready(function () {
        $('#btn_add_new_contact').click(function () {

            var content = '<div style="float: left; width: 100%" > <div style="float: left; width: 25%; margin-right: 5%">';
            content += '<select class="select_contact_type">';
            <?php
                $contact_array = Velacolib\Utility\Utility::contactType();
                foreach($contact_array as $key => $contact){
                    ?>
            content += '<option value="<?php echo $key; ?>" ><?php echo $contact; ?></option>';
            <?php
                }
            ?>
            content += '</select>';
            content += ' </div>';
            content += '<div class="" style="float: left; width: 40%">';
            content += '<input  type="text" name="contact[contact_value][1][]" class="text" placeholder="Contact Value">';
            content += '</div>';
            content += '<div class="" style="float: left; width: 20%; margin-left: 5%">';
            content += '  <a href="#" class="button btn_delete_contact gray launch"  style="padding-top: 13px; height: 13px; margin-left: 21px;" >Delete</a>';
            content += '</div>';

            '</div>';
            $("#contact_field").append(content);
            return false;
        })


        $(document).on('click', '.btn_delete_contact', function () {
            var total = $("#total_sky").attr('class');
            $(this).parent().parent().remove();
        })
        $(document).on('change', '.select_contact_type', function () {
            var val = $(this).find(":selected").val();
            //$(this).attr('name','contact['+val+'][]');
            $(this).parent().next().children('input').attr('name', 'contact[' + val + '][]');
            //alert(val);
        })
    })
</script>